import { ReactViewState, ReactView, reactControl, ReactViewControl } from "pao-aop-client";
import React from "react";
import { addon } from "pao-aop";
import { Result, Button, Icon } from 'antd-mobile';
import { ROUTE_PATH, decodeUrlParam } from "src/projects/app/util-tool";
import './index.less';

const wechatPicture = require('src/static/img/success_hook.jpg');
/**
 * 组件：支付成功状态
 */
export interface PaymentSucceedViewState extends ReactViewState {
    status?: any;
}

/**
 * 组件：支付成功
 * 描述
 */
export class PaymentSucceedView extends ReactView<PaymentSucceedViewControl, PaymentSucceedViewState> {
    constructor(props: any) {
        super(props);
        this.state = {
            status: true
        };
    }
    componentDidMount() {
        let order_info_b64 = this.props.match!.params.key;
        let order_info = JSON.parse(decodeUrlParam(order_info_b64));
        console.log("支付信息》》》》》》》》》", order_info);
        if (order_info.type === '微信支付') {
            // TODO: 调用接口，查询支付结果
            // if (true) {
            //     // 支付成功
            //     this.setState({
            //         status: true
            //     });
            // }
            if (false) {

            }
        }
    }
    succeed = () => {
        this.props.history!.push(ROUTE_PATH.home);
    }
    render() {
        const myImg = (src: string | undefined) => <img src={src} className="spe am-icon am-icon-md" alt="" />;
        const payInfoEncode = this.props.match!.params.key;
        const payInfoJson = JSON.parse(decodeUrlParam(payInfoEncode));

        /** 付款方式: 目前有 '微信支付' 以及  '支付宝支付' */
        const payType = payInfoJson.type;
        /** 付款金额 */
        const amount = payInfoJson.amount;
        // const { status } = this.state;
        return (
            <div>
                {true === true ?
                    <Result
                        img={
                            (() => {
                                switch (payType) {
                                    case '微信支付':
                                        return myImg(wechatPicture);
                                    case '支付宝支付':
                                        return myImg('https://gw.alipayobjects.com/zos/rmsportal/pdFARIqkrKEGVVEwotFe.svg');
                                    default:
                                        return myImg('https://gw.alipayobjects.com/zos/rmsportal/pdFARIqkrKEGVVEwotFe.svg');
                                }
                            })()
                        }
                        title="支付成功"
                        message={<div>{amount}元</div>}
                    />
                    :
                    <Result
                        img={<Icon type="cross-circle-o" className="spe" style={{ fill: '#F13642' }} />}
                        title="支付失败"
                        message=''
                    />
                }
                <div className="submit-btn"><Button type="primary" onClick={this.succeed}>完成</Button></div>
            </div>
        );
    }
}

/**
 * 控件：支付成功控制器
 * 描述
 */
@addon('PaymentSucceedView', '支付成功', '描述')
@reactControl(PaymentSucceedView, true)
export class PaymentSucceedViewControl extends ReactViewControl {
    constructor() {
        super();
    }
}